<template>
  <div :id="id" class="chart"></div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      id: this.getID(),
      myChart: null,
    };
  },
  watch:{
    value(){
      this.initChart();
    },
  },
  methods: {
    resize() {
      this.myChart.resize();
    },
    getID() {
      return "oeeboard-chart1-" + new Date().getTime() + Math.random();
    },
    initChart() {
      window.removeEventListener("resize", this.resize);
      this.myChart = echarts.init(document.getElementById(this.id));
      const option = {
        title: {
          text: `${this.value}%`,
          left: "center",
          top: "39%",
          size: 100,
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "pie",
            color: ["#4f73c2", "#dae2f2"],
            radius: ["70%", "80%"],
            hoverAnimation: false,
            fontSize:1,
            itemStyle: {
              borderRadius: 50,
              borderWidth: 0,
            },
            label: {
              show: true,
              position: "center",
              normal: {
                show: false,
                position: "center",
              },
            },
            data: [{ value: this.value }, { value: 100-this.value }],
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.initChart();
		window.addEventListener('resize', ()=>{
      setTimeout(this.resize, 100);
    });
	},
	destroyed() {
		window.removeEventListener('resize', this.resize);
	},
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
